<template>
    <view class="oreder-header">
        <view class="flex-between css-orderall mlr-30">
            <view class="css-left">全部可开票订单</view>
            <view class="css-right" @click="filterOpen">
                <text class="css-filtertxt">筛选</text>
                <iconsfont customIcons="icon-shaixuan" color="#666666 " size="20"></iconsfont>
            </view>
        </view>
        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true" class="drawer">
            <view class="drawer-view">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="css-line12" />
                    <view class="filter-item date-item">
                        <text class="label">下单时间</text>
                        <view class="filter-date-time">
                            <text
                                class="date-time"
                                :class="filterData.startDate == '' ? 'data-time-ccc' : ''"
                                @click="openStarDate"
                                >{{ filterData.startDate == "" ? "请选择时间" : filterData.startDate }}</text
                            >
                            <text class="date-time-tip">至</text>
                            <text
                                class="date-time"
                                :class="filterData.endDate == '' ? 'data-time-ccc' : ''"
                                @click="openEndDate"
                                >{{ filterData.endDate == "" ? "请选择时间" : filterData.endDate }}</text
                            >
                        </view>
                    </view>
                    <view class="css-line12" />
                    <view class="filter-item date-item">
                        <text class="label">订单金额</text>
                        <view class="filter-date-time">
                            <input
                                confirm-type="search"
                                placeholder="请输入金额"
                                v-model="filterData.startOrderPrice"
                                class="date-time" />
                            <text class="date-time-tip">至</text>
                            <input
                                confirm-type="search"
                                placeholder="请输入金额"
                                v-model="filterData.endOrderPrice"
                                class="date-time" />
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="cancelFilter">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="doFilter">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
        <uni-calendar
            :date="filterData.startDate"
            class="zindeup"
            ref="startDate"
            :insert="false"
            @confirm="confirmStarDate">
        </uni-calendar>
        <uni-calendar
            :date="filterData.endDate"
            class="zindeup"
            ref="endDate"
            :insert="false"
            @confirm="confirmEndDate"></uni-calendar>
    </view>
</template>

<script>
import { getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import utilsOld from "@/utils/utilsOld.js"
export default {
    props: {},
    components: {},
    data() {
        return {
            isShowFilter: false,
            filterData: {
                startDate: "",
                endDate: "",
                startOrderPrice: "",
                endOrderPrice: "",
            },
            popTop: 0,
        }
    },
    mounted() {},
    methods: {
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        filterAction() {
            //弹出、关闭筛选
            this.isShowFilter = !this.isShowFilter
            // if (this.isShowFilter) {
            // 	this.$refs.filterPopup.close()
            // } else {
            // 	this.$refs.filterPopup.open()
            // }
        },
        changeFilterPopup(value) {
            //弹出、关闭筛选回调
            this.isShowFilter = value.show
        },
        getString(value) {
            //转为string
            return value.toString()
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startDate = e.fulldate
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endDate = e.fulldate
        },
        cancelFilter() {
            //重置筛选
            this.filterData = {
                startDate: "",
                endDate: "",
                startOrderPrice: "",
                endOrderPrice: "",
            }
        },
        doFilter() {
            //提交筛选
            this.$emit("doFilter", this.filterData)
            this.$refs.showRight.close()
        },
    },
}
</script>

<style lang="scss">
.filter-main {
    display: flex;
    flex: 1;
    background: $color-white;
    padding: $app-page-padding;
    flex-direction: column;

    .filter-item {
        margin-bottom: 30rpx;

        .item-title {
            margin-bottom: 30rpx;
        }
    }

    .filter-date-tag {
        margin-bottom: 50rpx;
        display: flex;
        flex-direction: row;

        .tag-item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            margin-left: 30rpx;

            &:first-child {
                margin-left: 0;
            }
        }

        .selected {
            text {
                color: $app-color-main;
                border: 1rpx solid $app-color-main;
            }
        }
    }

    .radio-group {
        display: flex;
        flex-direction: row;
        align-items: center;

        .radio-label {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 20rpx;

            .radio {
                transform: scale(0.8);
            }
        }
    }
}

.filter-action .btn {
    font-size: 28rpx;
}

.filter-date-time {
    display: flex;
    flex-direction: row;
    padding: 30rpx 0;

    .date-time {
        // display: flex;
        // flex: 1;
        // justify-content: center;
        font-size: 28rpx;
        color: #000000;
        background: #f5f5f5;
        border-radius: 16rpx;
        text-align: center;
        width: 250rpx;
        height: 72rpx;
        line-height: 72rpx;
    }
    .date-time-tip {
        margin: 17rpx 20rpx 0 20rpx;
    }

    .data-time-ccc {
        color: $app-color-text-tip;
    }
}
.css-orderall {
    height: 68rpx;
    margin-top: 20rpx;
}
.css-left {
    font-size: 24rpx;
    color: #666666;
}
.css-right {
    display: inline;
}
.css-filtertxt {
    font-size: 24rpx;
    color: #666666;
    // margin-top: 5rpx;
    margin-right: 10rpx;
}
.css-filterimg {
}
.css-line12 {
    height: 12rpx;
    width: 100%;
    background: #f6f6f6;
}
</style>
